<template>
  <a-modal
    v-model="visible"
    title="编辑"
    @ok="onSubmit"
    @cancel="close"
  >
    <a-form-model
      v-if="visible"
      ref="nodeForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item ref="nodename" label="节点名称" prop="nodename">
        <a-input
          v-model="form.nodename"
          placeholder="输入节点名称"
        />
      </a-form-model-item>

      <a-form-model-item ref="prefix" label="节点前缀" prop="prefix.id" :auto-link="false">
        <a-select v-model="form.prefix.id" placeholder="选择节点前缀" @change="handlerChangePrefix">
          <a-select-option v-for="item in prefixData" :key="item.id" :value="item.id">
            {{ item.prefixNext }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item ref="nodetype" label="节点类型" prop="nodetype" :autoLink="false">
        <a-select v-model="form.nodetype"  placeholder="选择节点类型" :disabled="this.currentLevel != 2" @change="typeChange" >
          <a-select-option v-for="item in nodetypes" :key="item.code" :value="item.code">
            {{ item.label}}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item ref="nodeip" label="节点ip" prop="nodeip" >
        <a-input
          :disabled="form.nodetype==2"
          v-model="form.nodeip"
          placeholder="输入节点ip"
        />
      </a-form-model-item>

      <a-form-model-item ref="nodeport" label="节点端口" prop="nodeport" >
        <a-input
          :disabled="form.nodetype==2"
          v-model="form.nodeport"
          placeholder="输入节点port"
        />
      </a-form-model-item>

      <a-form-model-item ref="nettyport" label="心跳监听端口" prop="nettyport" v-if="form.nodetype==1">
        <a-input
          v-model="form.nettyport"
          placeholder="心跳监听端口"
        />
      </a-form-model-item>

      <a-form-model-item ref="nodelevel" label="节点等级" prop="nodelevel">
        <a-select v-model="form.nodelevel" placeholder="选择节点等级" :disabled="true">
          <a-select-option v-for="item in nodelevels" :key="item.code" :value="item.code">
            {{ item.label}}
          </a-select-option>
        </a-select>
      </a-form-model-item>




    </a-form-model>
  </a-modal>
</template>
<script>
  import {checkNodeHasPrefix, getCurrentNode, saveNode} from '@/api/node'
  import {getAllByOrgId} from '@/api/prefix'
  import {mapGetters} from "vuex";
  import events from "@/components/tools/events";

  export default {
    name: 'Edit',
    data: function () {
      return {
        labelCol: {span: 8},
        wrapperCol: {span: 10},
        other: '',
        visible: false,
        form: {
          id: '',
          prefix: {id: undefined},
        },
        currentLevel: null,
        currentNode: null,
        orgId: 'asd',
        prefixData: [],
        nodelevels: [{label: '一级节点', code: 1}, {label: '二级节点', code: 2}, {label: '三级节点', code: 3}],
        nodetypes: [{label: '真实节点', code: 1}, {label: '虚拟节点', code: 2}],
        rules: {
          nodename: [
            {required: true, message: '请输入节点名称', trigger: 'blur'}
          ],
          nodeip: [
            {required: true, message: '请输入节点ip', trigger: 'blur'}
          ],
          nodeport: [
            {required: true, message: '请输入节点端口', trigger: 'blur'}
          ],
          nodelevel: [
            {required: true, message: '请输入节点等级', trigger: 'blur'}
          ],
          nodetype: [
            {required: true, message: '请输入节点类型', trigger: 'blur'}
          ],
          nettyport: [
            {required: true, message: '请输入心跳监听端口', trigger: 'blur'}
          ],
          'prefix.id': [
            {required: true, message: '请选择前缀', trigger: 'blur'}
          ],
        },
      }
    },
    mounted() {

    },
    computed: {
      ...mapGetters(['currentNode'])
    },
    methods: {
      handlerChangePrefix(e) {
        this.$refs.prefix.onFieldChange()
        let prefix = this.prefixData.filter(t => t.id === e)[0]
        this.form.prefixNext = prefix.prefixNext
      },
      typeChange(type){
        if(type == 1){
          this.$set(this.form,'nodeip',"")
          this.$set(this.form,'nodeport',"")
        } else {
          this.$set(this.form,'nodeip',this.currentNode.nodeip)
          this.$set(this.form,'nodeport',this.currentNode.nodeport)
        }
      },
      getPrefixData() {
        const _this = this
        getAllByOrgId(this.orgId).then(res => {
          _this.prefixData = res.data
        })
      },
      async initData(obj) {
        this.getPrefixData()
        await this.getCurrentNode()

        this.visible = true
        if(this.currentLevel < 3){
          this.form.nodelevel = this.currentLevel + 1
        } else {
          this.form.nodelevel = 3
        }

        if(this.currentLevel != 2){
          this.form.nodetype = 1
        }

        if (obj.id) {
          this.$nextTick(() => {
            this.form = obj
          })
        }
      },
      onSubmit() {
        this.$refs.nodeForm.validate(valid => {
          if (valid) {
            checkNodeHasPrefix(this.form.prefix.id, this.form.id).then(res => {
              if (res.data) {
                this.$message.error('该前缀已被使用')
                return
              }

              saveNode(this.form).then(res => {
                if (res.code === '0') {
                  this.$message.success('保存成功')
                  if (this.currentNode.nodelevel === 2) {
                    events.$emit(('updateOrganizationList'));
                  }
                } else {
                  this.$message.error('保存失败')
                }
              }).finally(() => {
                this.close()
              })
            })

          }
        })()
      },
      async getCurrentNode(){
        await getCurrentNode().then((res) => {
          if(res.code == '0'){
            this.currentLevel = res.data.nodelevel
            this.currentNode = res.data
          }
        })
      },
      close() {
        this.form = {
          id: '',
          prefix: {id: undefined},
        }
        this.visible = false
        this.$emit('ok')
      }
    }
  }
</script>
